<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";
      // import {
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      const ChildComponent = {
        props: {
          count: String,
        },
        render(proxy) {
          return h(Text, proxy.count);
        },
      };

      // setup
      // 1) 可以返回对象 作为proxy中的数据源
      // 2) 可以返回一个渲染函数用作渲染

      // const ParentComponent = {
      //   setup() {
      //     const state = reactive({ count: 0 });
      //     const double = computed(() => state.count * 2);
      //     console.log(double);
      //     return {
      //       ...toRefs(state),
      //       double,
      //     };
      //   },
      //   render(proxy) {
      //     return h("div", [
      //       h(ChildComponent, { count: proxy.count }),
      //       h(
      //         "button",
      //         {
      //           onClick: () => {
      //             proxy.count++;
      //           },
      //         },
      //         "点我啊" + proxy.double
      //       ),
      //     ]);
      //   },
      // };

      const ParentComponent = {
        props: {
          a: Number,
        },
        setup(props, ctx) {
          console.log(props.a);
          const state = reactive({ count: 0 });
          const double = computed(() => state.count * 2);

          // 里层render优先级更高
          return () => {
            return h("div", [
              h(ChildComponent, { count: state.count }),
              h(
                "button",
                {
                  onClick: () => {
                    state.count++;
                    ctx.emit("myEvent", 100);
                  },
                },
                "点我啊" + double.value
              ),
            ]);
          };
        },
      };

      render(
        h(ParentComponent, { a: 1, onMyEvent: (val) => alert("我很帅" + val) }),
        app
      );
    </script>
  </body>
</html>
